<template>
    <div class="root">
        <div class="one">
        <div v-for="(v,k) in data1" :key="k" >
            <p @click="to(v.router)">{{v.title}}</p>
            <p>{{v.a}}</p>
            <div v-for="(v,k) in v.b" :key="k">
                <p>{{v}}</p>
            </div>
        </div>
        </div>
        <router-view class="two"></router-view>
        <router-view name="lie" class="three"></router-view>
    </div>

</template>

<script>
    export default {
        name: "Docs",
        data: function () {
            return {
                data1: [{title: "简介",router:"/Docs/hh"}, {
                    title: "快速上手",
                    router:"/Docs/hh2",
                    a: "搭建环境",

                }]
            }
        },
        methods:{
            to(a){
                this.$router.push(a);
            }
        }
    }
</script>

<style scoped>
    .root{
        display: flex;
        width: 100%;
    }
    .one {
        width: 20%;
    }
    .two{
        width: 50%;
        text-align: center;
    }
    .three{
        width: 30%;
    }


    .one p {
        height: 50px;
        padding-left: 10px;
        line-height: 50px;
        margin-bottom: 5px;
        background-color: #d1dcfd;


    }

</style>